<template>
  <el-container class="frame-case" :style="{ height: data.winH + 'px' }">
    <el-header>
      <h3>{{ data.title }}</h3>
      <div class="toolbar">
        <el-dropdown>
          <el-icon style="margin-right: 8px; margin-top: 1px; color: #fff">
            <setting />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>关于</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>{{ data.user }}</span>
      </div>
    </el-header>
    <el-container>
      <el-aside width="220px">
        <el-scrollbar :style="{ height: data.winH - 60 + 'px' }">
          <el-menu :default-openeds="['1']" :unique-opened="true">
            <el-sub-menu :index="item.index" v-for="(item, key) in navs" :key="key">
              <template #title>
                <component :is="item.icon" style="width: 24px;height: 18px;"></component>
                <span class="title">{{ item.title }}</span>
              </template>
              <el-menu-item :index="item.index" v-for="(menu, key) in item.nav" :key="key">
                <router-link :to="menu.url">{{ menu.name }}</router-link>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <el-scrollbar :style="{ height: data.winH - 60 + 'px' }">
          <router-view />
        </el-scrollbar>
        <el-footer>{{ data.footer }}</el-footer>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { reactive } from "vue";
import { menu, base } from "./comm/menu";
let data = reactive({
  title: base.title,
  footer: base.footer,
  user: base.user,
  winH: base.winH,
});
let navs = menu;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

body,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iframe {
  padding: 6px 15px;
}

.iframe .i-title {
  padding: 5px 0;
  border-bottom: solid 1px #ccc;
}

.iframe .i-title h3,
h3 {
  padding: 0;
  margin: 0;
}

.iframe .i-tip {
  padding: 5px 0;
}

.iframe .i-tip .span{
  width: 65px;
  display: inline-block;
  text-align: right;
  color:#777;
}

.iframe .el-input {
  width: 260px;
}
</style>
<style scoped>
@import url("../src/assets/css/app.css");
</style>
